<template>
	<view>
		<view class="back">
			<view class="Lists flexRow">
				<view class="flexRow flexList">
					<text class="t1">
						<picker @change="bindPickerChange" :value="index" :range="array" class="inputs">
						    <view class="uni-input">{{array[index]}}</view>
						</picker>
					</text>
					<view class="iconfont icon-xialasanjiao f1" ></view>
				</view>
				<view class="flexRow flexList">
					<text class="t1">
						<picker @change="bindPickerChange2" :value="index2" :range="array2" class="inputs">
						    <view class="uni-input">{{array2[index2]}}</view>
						</picker>
					</text>
					<view class="iconfont icon-xialasanjiao f1" ></view>
				</view>
				<view class="flexRow flexList">
					<text class="t1">
						<picker @change="bindPickerChange3" :value="index3" :range="array3" class="inputs">
						    <view class="uni-input">{{array3[index3]}}</view>
						</picker>
					</text>
					<view class="iconfont icon-xialasanjiao f1" ></view>
				</view>
				<view class="flexRow flexList">
					<text class="t1">
						<picker @change="bindPickerChange4" :value="index4" :range="array4" class="inputs">
						    <view class="uni-input">{{array4[index4]}}</view>
						</picker>
					</text>
					<view class="iconfont icon-xialasanjiao f1" ></view>
				</view>
			</view>
			
			<view v-for="item in 6">
				<view class="flexRow row1">
					<text class="c1">UI设计师</text>
					<text class="c2">12-16K/月</text>
				</view>
				
				<view class="imgList flexRow">
					<view class="flexRow imgrow1">
						<image src="../../static/newimg/2.png" class="img" style="width: 24upx;height: 30upx;"></image>
						<text class="t1">海州</text>
						
						<image src="../../static/newimg/3.png" class="img left" style="width: 34rpx;height: 30rpx;"></image>
						<text class="t1">3-5年</text>
						
						<image src="../../static/newimg/4.png" class="img left" style="width: 44rpx;height: 30rpx;"></image>
						<text class="t1">大专</text>
					</view>
					<view class="imgrow2">17:00今天</view>
				</view>
				
				<view class="company">江苏省库及苏省库有限公司</view>
				
				<view class="line"></view>
			</view>
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				array : ['经验',"条件1"] ,
				index: 0,
				
				array2 : ['薪资',"条件1"] ,
				index2: 0,
				
				array3 : ['公司性质',"条件1"] ,
				index3: 0,
				
				array4 : ['行业领域',"条件1"] ,
				index4: 0,
			}
		},
		methods: {
			bindPickerChange: function(e) {
			    this.index = e.target.value
			},  
			bindPickerChange2: function(e) {
			    this.index2 = e.target.value
			},
			bindPickerChange3: function(e) {
			    this.index3 = e.target.value
			},
			bindPickerChange4: function(e) {
			    this.index4 = e.target.value
			},
		}
	}
</script>

<style lang='scss'>
	@import "../../static/icon/icon.css";
	
 .back{
	 width: 92%;
	 margin-left: 4%;
	 
	 
	 .Lists{
		 height: 50rpx;
		 align-items: center;
		 
		 .flexList{
			 width: 25%;
		 }
		 
		 .t1{
			 font-size: $uni-font-size-big;
		 }
		 .f1{
			 margin-left: 5rpx;
			 margin-top: 8rpx;
		 }
	 }
	 
	 .row1{
	 		  margin-top: 30rpx;
	 		  
	 		  .c1{
	 			  width: 50%;
	 			  font-size: $uni-font-size-lg;
	 			  font-weight: 680;
	 		  }
	 		  .c2{
	 			  width: 50%;
	 			  color: red;
				   font-size: $uni-font-size-lg;
	 			  text-align: right;
	 		  }
	 		}
	 		.imgList{
	 			height: 40rpx;
	 			align-items: center;
	 			margin-top: 10rpx;
	 			font-size: $uni-font-size-sm;
	 			color: gray;
	 			
	 			.imgrow1{
	 				width: 80%;
	 			}
	 			
	 			.imgrow2{
	 				width: 20%;
	 				text-align: right;
	 			}
	 			
	 			.t1{
	 				margin-left: 10rpx;
	 			}
	 			.img{
	 				width: 30rpx;
	 				height: 30rpx;
	 			}
	 			.left{
	 				margin-left: 25rpx;
	 			}
	 		}
	 		
	 		.company{
	 			margin-top: 10rpx;
	 			font-size: $uni-font-size-base;
	 			color: gray;
	 		}
	 		
	 		.line{
	 		  	width: 100%;
	 			height: 2rpx;
	 			margin-top: 30rpx;
	 			background: $uni-text-color-line;
	 		}
	}
</style>
